<template>
  <div>
    <hr>
    <h3>组合API --- 父子通信 </h3>
    <h5>子组件</h5>
    <p>爸爸给儿子的零花钱: {{ pocketMoney }}</p>
    <button @click="buyToys">儿子花钱买玩具了~</button>
  </div>
</template>

<script>
import {onMounted} from "vue";
import {getRandomInt} from "../util/tool";

export default {
  name: "PropsAndEmit",
  // 子组件接收父组件数据使用props即可
  props: {
    pocketMoney: {
      type: Number,
      default: 0
    }
  },
  /**
   *
   * @param props  自定义属性, 来自于父组件数据
   * @param context 上下文对象, 可以提供emit方法
   * @return {{buyToys: buyToys}}
   */
  setup(props, context) {
    // 获取父组件数据money
    // 获取失败, 在setup中无法使用this的
    // onMounted(() => {
    //   // console.log(this.pocketMoney)
    // })

    console.log(`在setup选项中, 拿到props自定义属性, pocketMoney ${props.pocketMoney}`)

    const buyToys = () => {
      // 买玩具所花的钱
      const money = getRandomInt(50, 150);
      console.log(`儿子买了一个玩具, 花了${money}元`)
      // 通知父组件发生变化
      context.emit('update:pocketMoney', props.pocketMoney - money)

    }

    return {
      buyToys
    }
  }
}
</script>

<style scoped>

</style>
